<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>dp-Syntax Highlighter</title>



</head>

<body>

<pre name="code" class="css::collapse">
.GR_Editor {
	margin:0 auto;
	background:#888;
	padding:10px 0;
	min-height:700px;
	position:relative;
}
.GR_Editor h2,
.GR_Editor h3 {
	font:bold 40px &quot;
	Times New Roman&quot;,Times,serif;
	text-align:center;
	margin:0;
	padding:0;
}
.GR_Editor h2 a:link,
.GR_Editor h3 {
	color:#ccc;
	text-decoration:none;
	display:block;
	text-shadow:-1px -1px 0 #fff,1px 1px 0 #555;
}

.GR_Editor h2 a:hover {
	color:#f00;
}

.GR_Editor h3 {
	font:bold 22px Georgia,&quot;Times New Roman&quot;,Times,serif;
	margin:10px 0 5px;
}

#GR_editHere,
#GR_preview {
	width:auto;
	width:100%;
	display:block;
	margin:0;
}
#GR_editHere {
	width:70%;
	min-width:400px;
	margin:0 auto;
	background:#ccc;
	padding:10px 5px 5px 12px;
	font:normal 12px Verdana,Tahoma,Arial;
	line-height:18px;
	border:2px solid #444;
	border-radius:8px;
	box-shadow:0 0 8px #fff;
}
#div_GR_preview {
	background:#fff;
	border:2px solid #aaa;
	height:auto;
	min-height:580px;
	max-width:100%;
	overflow:auto;
	resize:both;
	padding:0;
	margin:0;
}
#GR_preview {
	min-height:560px;
	width:100%;
	border:none;
}
.meongku {
	width:200px;
	margin:0 auto;
}
.meongku .clik {
	cursor:pointer; /* contoh komentar gubhugreyot */
}
a {
	outline:none !important;
}

.post .post-body:after {
	display:none;
}
</pre>
<pre name="code" class="js">//&lt;![CDATA[
var GRonline = &#39;&#39;;

function update() { // contoh komentar gubhugreyot
    var docObj = window.frames[&#39;GR_preview&#39;].document;
    var textarea = document.getElementById(&#39;GR_editHere&#39;);

    if (GRonline != textarea.value) {
        GRonline = textarea.value
        docObj.open(&#39;text/html&#39;, &#39;replace&#39;);
        docObj.write(GRonline);
        docObj.close();
    }
    window.setTimeout(update, 150)
}
onload = function () {
    document.getElementById(&#39;GR_htmlEditor&#39;).style.display = &#39;inline&#39;;
    //document.getElementById(&#39;GR_editHere&#39;).select();
    update();
}
//]]&gt;</pre>



<textarea name="code" class="xml" cols="60" rows="10">
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
//&lt;![CDATA[
var GRonline = &#39;&#39;;

function update() {
    var docObj = window.frames[&#39;GR_preview&#39;].document;
    var textarea = document.getElementById(&#39;GR_editHere&#39;);

    if (GRonline != textarea.value) {
        GRonline = textarea.value
        docObj.open(&#39;text/html&#39;, &#39;replace&#39;);
        docObj.write(GRonline);
        docObj.close();
    }
    window.setTimeout(update, 150)
}
onload = function () {
    document.getElementById(&#39;GR_htmlEditor&#39;).style.display = &#39;inline&#39;;
    //document.getElementById(&#39;GR_editHere&#39;).select();
    update();
}
//]]&gt;
&lt;/script&gt;

&lt;style type=&quot;text/css&quot;&gt;
.GR_Editor {
	margin:0 auto;
	background:#888;
	padding:10px 0;
	min-height:700px;
	position:relative;
}

.GR_Editor h2,
.GR_Editor h3 {
	font:bold 40px &quot;
	Times New Roman&quot;
	,Times,serif;
	text-align:center;
	margin:0;
	padding:0;
}

.GR_Editor h2 a:link,
.GR_Editor h3 {
	color:#ccc;
	text-decoration:none;
	display:block;
	text-shadow:-1px -1px 0 #fff,1px 1px 0 #555;
}

.GR_Editor h2 a:hover {
	color:#f00;
}

.GR_Editor h3 {
	font:bold 22px Georgia,&quot;
	Times New Roman&quot;
	,Times,serif;
	margin:10px 0 5px;
}

#GR_editHere,
#GR_preview {
	width:auto;
	width:100%;
	display:block;
	margin:0;
}
#GR_editHere {
	width:70%;
	min-width:400px;
	margin:0 auto;
	background:#ccc;
	padding:10px 5px 5px 12px;
	font:normal 12px Verdana,Tahoma,Arial;
	line-height:18px;
	border:2px solid #444;
	border-radius:8px;
	box-shadow:0 0 8px #fff;
}
#div_GR_preview {
	background:#fff;
	border:2px solid #aaa;
	height:auto;
	min-height:580px;
	max-width:100%;
	overflow:auto;
	resize:both;
	padding:0;
	margin:0;
}
#GR_preview {
	min-height:560px;
	width:100%;
	border:none;
}
.meongku {
	width:200px;
	margin:0 auto;
}
.meongku .clik {
	cursor:pointer;
}
a {
	outline:none !important;
}

.post .post-body:after {
	display:none;
}
&lt;/style&gt;

&lt;div id=&quot;GR_htmlEditor&quot; style=&quot;display: none&quot;&gt;
&lt;div class=&quot;GR_Editor&quot;&gt;
&lt;h2&gt;&lt;a href=&quot;http://gubhugreyot.blogspot.com&quot; target=&quot;_blank&quot;&gt;HTML Editor Online&lt;/a&gt;&lt;/h2&gt;
&lt;form&gt;
&lt;div class=&quot;meongku&quot;&gt;&lt;input class=&quot;clik&quot; onclick=&quot;javascript:this.form.GR_editHere.focus();this.form.GR_editHere.select();&quot; value=&quot;Select All&quot; type=&quot;button&quot;/&gt;&lt;input class=&quot;clik&quot; onclick=&quot;javascript:this.form.GR_editHere.value=&#39;&#39;;&quot; value=&quot;Clear&quot; type=&quot;button&quot;/&gt; &lt;/div&gt;
&lt;textarea name=&quot;ta&quot; id=&quot;GR_editHere&quot; rows=&quot;10&quot;&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;

&lt;title&gt;Online HTML Editor&lt;/title&gt;

&lt;style type=&quot;text/css&quot;&gt;
.meong{
       padding:10px;
       background:lightblue;
       margin:10px 0;
       font-size:50px;
       letter-spacing:-1px;
}
.meong img{
       vertical-align:middle;
       margin-right:20px;
}
&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;p class=&quot;meong&quot;&gt;&lt;a href=&quot;http://gubhugcss.blogspot.com&quot; target=&quot;_blank&quot; title=&quot;Ciluk....., baaaaa....!!!!!&quot;&gt;&lt;img src=&quot;https://lh6.googleusercontent.com/-QYGyo4MaOD4/UDAZ-88GC7I/AAAAAAAAAMw/IP-xTZN5NFg/s120/gambar-kucing-300x300.jpg&quot; width=&quot;120&quot; height=&quot;120&quot; alt=&quot;Kucing garong&quot; /&gt;&lt;/a&gt;Kucing Garong&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
&lt;/textarea&gt;
&lt;/form&gt;
 &lt;h3&gt;Preview&lt;/h3&gt;
    &lt;div id=&quot;div_GR_preview&quot;&gt; 
 &lt;iframe src=&quot;javascript:&#39;&#39;&quot; name=&quot;GR_preview&quot; id=&quot;GR_preview&quot;&gt;
  &lt;p&gt; Sorry, your browser does not support the Real Time HTML editor. We recommend you upgrade your browser.&lt;/p&gt;
 &lt;/iframe&gt;
    &lt;/div&gt; 
&lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;</textarea>


<!--
<link type="text/css" rel="stylesheet" href="http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css"></link>
-->
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js"></script>

<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js"></script>

<style>
.dp-highlighter{font-family: "Courier", "Tahoma", "Monaco", "Consolas",  "Courier New", Courier, monospace;font-size: 14px; background-color: #E7E5DC;width:99%;overflow:auto;margin:18px 0 18px 0 !important;padding-top: 1px;text-shadow:1px 1px 1px #fff; /* adds a little border on top when controls are hidden */}
/* clear styles */
.dp-highlighter ol,.dp-highlighter ol li,.dp-highlighter ol li span {margin: 0;padding: 0;border: none;}
.dp-highlighter a,.dp-highlighter a:hover{background: none;border: none;padding: 0;margin: 0;}
.dp-highlighter .bar{padding-left: 45px;}
.dp-highlighter.collapsed .bar,.dp-highlighter.nogutter .bar{padding-left: 0px;}
.dp-highlighter ol{list-style: decimal; /* for ie */
	background-color: #fff;
	margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */padding: 0px;color:#5C5C5C;}
.dp-highlighter.nogutter ol,.dp-highlighter.nogutter ol li{list-style: none !important;margin-left: 0px !important;}
.dp-highlighter ol li,.dp-highlighter .columns div{list-style: decimal-leading-zero; /* better look for others, override cascade from OL */list-style-position: outside !important;
	border-left: 3px solid #6CE26C;background-color: #F8F8F8;
	color: #5C5C5C;padding: 0 3px 0 10px !important;margin: 0 !important;line-height: 14px;}
.dp-highlighter.nogutter ol li,.dp-highlighter.nogutter .columns div{border: 0;}
.dp-highlighter .columns{background-color: #F8F8F8;color: gray;overflow: hidden;width: 100%;}
.dp-highlighter .columns div{padding-bottom: 5px;}
.dp-highlighter ol li.alt{background-color: #FFF;color: inherit;}
/* Adjust some properties when collapsed */
.dp-highlighter.collapsed ol{margin: 0px;}
.dp-highlighter.collapsed ol li{display: none;}
/* Additional modifications when in print-view */
.dp-highlighter.printing{border: none;}
.dp-highlighter.printing .tools{display: none !important;}
.dp-highlighter.printing li{display: list-item !important;}
/* Styles for the tools */
.dp-highlighter .tools{padding: 3px 8px 3px 10px;
	font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: silver;
	background-color: #f8f8f8;
	padding-bottom: 10px;
	border-left: 3px solid #6CE26C;
}
.dp-highlighter.nogutter .tools{border-left: 0;}
.dp-highlighter.collapsed .tools{border-bottom: 0;}
.dp-highlighter .tools a{font-size: 9px;
	color: #a0a0a0;background-color: inherit;text-decoration: none;margin-right: 10px;}
.dp-highlighter .tools a:hover{color: red;background-color: inherit;text-decoration: underline;}
/* About dialog styles */
.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table {width:100%;height:100%;font-size:11px;font-family:Tahoma,Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; /*font-weight: bold; */}
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
/* Language specific styles */

.dp-highlighter ol li span{color: #222;background-color: inherit;font-weight:normal;}
.dp-highlighter .comment, .dp-highlighter .comments { color: #008200;color: #aaa; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; /*font-weight: bold;*/ background-color: inherit; color:green;font-weight:normal;}
.dp-highlighter .preprocessor { color: gray; background-color: inherit; color:red;}
.dp-highlighter .comment, .dp-highlighter .comments { color: #aaa; background-color: inherit;}
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword{ color:#069; background-color: inherit;}
.dp-highlighter .value { color: #960;}
.dp-highlighter .fonts { color: teal;}
.dp-highlighter .colors{ color:orange;}
.dp-highlighter .dp-xml .cdata{color:teal;}
.dp-highlighter .dp-xml .tag,.dp-highlighter .dp-xml .tag-name {color:#069;font-weight:normal;}
.dp-highlighter .dp-xml .attribute {color:seagreen;}
.dp-highlighter .dp-xml .attribute-value{color:royalblue;}

</style>



<script class="javascript">
     if(window.isBloggerMode == true)
      dp.SyntaxHighlighter.BloggerMode(); 
     
      dp.SyntaxHighlighter.ClipboardSwf = 'http://gr-blogtools.googlecode.com/svn/SyntaxHighlighter/ori/js/clipboard.swf';
      dp.SyntaxHighlighter.HighlightAll('code');
    </script>

</body>
</html>